<template>
	<view class="container">
		<view class="imgContainer1" v-if="templateStatus == 1">
			<image :src="$imgUrl + '/static/tongzhidan.png'" alt="" class="img" :lazy-load="true"></image>
		</view>
		<view class="imgContainer2" v-if="templateStatus == 2">
			<image :src="$imgUrl + '/static/zhizuodan.png'" alt="" class="img" :lazy-load="true"></image>
		</view>
		<view class="imgContainer3" v-if="templateStatus == 3">
			<image :src="$imgUrl + '/static/quxiaodan.png'" alt="" class="img" :lazy-load="true"></image>
		</view>
		<view class="imgContainer4" v-if="templateStatus == 4">
			<image :src="$imgUrl + '/static/kecuidan.png'" alt="" class="img" :lazy-load="true"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				templateStatus: ''
			}
		},
		methods: {

		},
		onLoad(option) {
			this.templateStatus = option.type
		}
	}
</script>

<style lang="scss">
	.imgContainer1 {
		width: 100%;
		height: 120vh;
		text-align: center;
	}
	.imgContainer2 {
		width: 100%;
		height: 72vh;
		text-align: center;
	}
	.imgContainer3 {
		width: 100%;
		height: 42vh;
		text-align: center;
	}
	.imgContainer4 {
		width: 100%;
		height: 42vh;
		text-align: center;
	}

	.img {
		width: 100%;
		height: 100%;
	}
</style>